import Taro, { Component } from '@tarojs/taro'
import { View, Text} from '@tarojs/components'
import { AtActionSheet, AtIcon } from 'taro-ui'
import './dLinearLayout.scss'

export class Youhui extends Component {
  state = {
    openAtAction: false,
  }
  componentDidMount () { 
  }

  handleShowAtAction(){
    this.setState({
      openAtAction:true
    });
  }

  handleCloseAtAction(){
    this.setState({
      openAtAction:false
    });
  }

  render () {
    const { openAtAction } = this.state;
    return (
      <View className='atAction-content'>
        <View className='dLinearLayout' onClick={() =>this.handleShowAtAction()}>
            <View className='dLinearLayout-left'>优惠</View>
            <View  className='dLinearLayout-center'>
              <View className='dLinearLayout-content'>
                <View className='dLinearLayout-type mr8'>店铺优惠券</View>
                <View className='mr8'>满99减10</View>
                <View>满200减20</View>
              </View>
              <View className='dLinearLayout-content mt20'>
                <View className='dLinearLayout-type mr8'>促销</View>
                <View className='black'>满58元，领超值赠品（赠完即止）...</View>
              </View>
            </View>
            <View className='dLinearLayout-right'>
              <View>领券</View>
              <AtIcon value='chevron-right' size='16' color='#8d8d8d'></AtIcon>
            </View>
          </View>

          <AtActionSheet isOpened={openAtAction}>
            <View className='at-title'>优惠</View>
            <View className='at-content'>
              <View className='promotion'>
                <View className='promotion-title'>促销</View>
                <View className='promotion-content'>
                  <View>积分</View> 
                  <Text>购买可得294积分</Text>
                </View>
              </View>
              <View className='quan-list'>
                <View className='quan-title'>
                  <View>领券</View>
                  <View>已有积分:2896</View>
                </View>
                <View className='quan'>
                  <View className='quan-content'>
                    <View className='quan-content-info'>
                      <Text className='quan-content-unit'>￥</Text>
                      <Text className='quan-content-amount'>100</Text>
                      <Text className='quan-content-type'>店铺优惠券</Text>
                    </View>
                    <View>订单金额满2000元可使用</View>
                    <View>有效期2019.03.05-2019.03.17</View>
                  </View>
                  <View className='quan-button'>
                    <Text>立即领取</Text>
                  </View>
                  <View className='quan-devision'>
                    <View className='circle circle-top'></View>
                    <View className='line'></View>
                    <View className='circle circle-bottom'></View>
                  </View>
                </View>
              </View>
            </View>
            <View className='at-button'>
              <Text>以上价格计算仅为初步预估，不代表最终购买价格</Text>
              <View className='button' onClick={() => this.handleCloseAtAction()}>完成</View>
            </View>
          </AtActionSheet>
        </View>
    )
  }
}